<script setup>
import axios from "axios"
import {ref, onMounted} from "vue"
import { router } from "../../router";

const dialogThis1 = ref("dialogThis")
const dialogThis2 = ref("")
const dialogThis3 = ref("")
const dialogThis4 = ref("")
const dialogThis5 = ref("")

onMounted(()=>{
    document.title = "音乐 - EvenSO"
})

const goToPage = (num) => {
    switch(num) {
        case 1:
            dialogThis1.value = "dialogThis"
            dialogThis2.value = ""
            dialogThis3.value = ""
            router.replace('/music/home')
            break
        case 2:
            dialogThis1.value = ""
            dialogThis2.value = "dialogThis"
            dialogThis3.value = ""
            router.replace('/music/original-music')
            break
        case 3:
            dialogThis1.value = ""
            dialogThis2.value = ""
            dialogThis3.value = "dialogThis"
            router.replace('/music/cover-singing')
            break
        default:
            break
    }
}

</script>

<template>
    <div class="dialogBoxAll">
        <div class="music_title_name">{{ "音乐" }}</div>
        <div class="dialogBox">
            <div class="dialog1" :class="dialogThis1">
                <span @click="goToPage(1)">{{ "首页" }}</span>
            </div>
            <div class="dialog1" :class="dialogThis2">
                <span @click="goToPage(2)">{{ "原创音乐" }}</span>
            </div>
            <div class="dialog1" :class="dialogThis3">
                <span @click="goToPage(3)">{{ "翻唱" }}</span>
            </div>
        </div>
        <div class="showBox">
            <router-view></router-view>
        </div>
    </div>
</template>

<style scoped>
.dialogBoxAll{
    width: 100%;
    height: 100%;
}
.music_title_name{
    position: absolute;
    left: 50px;
    top: 0px;
    font-size: 30px;
    font-weight: 600;
}
.dialogBox{
    position: absolute;
    left: 150px;
    top: 0;
    width: 500px;
    height: 50px;
    display: flex;
    align-items: center;
    /* background-color: red; */
}

.dialog1{
    width: 15%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid rgb(255, 255, 255);
}

.dialog1 span{
    cursor: pointer;
}

.dialogThis{
    color: rgb(0, 90, 220);
    border-bottom: 2px solid rgb(0, 90, 220);
}

.showBox{
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 90%;
}
</style>